import { ref, watch } from "vue";
import { GlobalStore } from "@/store/modules/global";
export type themeType = "dark" | "light"

const useDark = ()=>{
  const globalStore = GlobalStore();
  const theme = ref<themeType>(globalStore.$state.config.mode)
  const light = {
    color: '#213547',
    color_background_hover: '#f2f2f2',
    color_background: '#ffffff',
    color_border: '#f0f0f0',
  };

  const dark = {
    color: '#fff',
    color_background_hover: '#00274d',
    color_background: '#181818',
    color_border: '#545454',
  };

  watch(()=>globalStore.$state.config.mode,()=>{
    theme.value = globalStore.$state.config.mode
  },{immediate:true,deep:true})

  const toogle = ()=>{
    if(theme.value === "light"){
      globalStore.setMode("dark")
    }else{
      globalStore.setMode("light")
    }
  }

  watch(()=>theme.value,()=>{
    if(theme.value === 'light'){
      document.documentElement.style.setProperty('--loong3-color', light.color);
      document.documentElement.style.setProperty('--loong3-color-background-hover', light.color_background_hover);
      document.documentElement.style.setProperty('--loong3-color-background', light.color_background);
      document.documentElement.style.setProperty('--loong3-color-border', light.color_border);

    }else{
      document.documentElement.style.setProperty('--loong3-color', dark.color);
      document.documentElement.style.setProperty('--loong3-color-background-hover', dark.color_background_hover);
      document.documentElement.style.setProperty('--loong3-color-background', dark.color_background);
      document.documentElement.style.setProperty('--loong3-color-border', dark.color_border);
    }
  },{immediate:true,deep:true})

  return {toogle,theme}
}

export default useDark;